<template>
  <el-card shadow="never">
    <div slot="header">
      <el-button @click="$router.push({ name: 'monitorIndex' })">返回</el-button>
    </div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="never" v-for="(item,index) in left" :key="index" class="mb20">
          <div slot="header">
            <el-button type="text" @click="handleClick(item)">{{ item.userName }}</el-button>
          </div>
          <el-row>
            <el-col :span="8" class="tl-center" style="border-right: 1px dashed #cccccc">
              总数
              <br />
              {{ item.shouldVisitNum }}
            </el-col>
            <el-col :span="8" class="tl-center" style="border-right: 1px dashed #cccccc">
              已回访
              <br />
              <span class="red">{{ item.actualVisitNum }}</span>
            </el-col>
            <el-col :span="8" class="tl-center" style="border-right: 1px dashed #cccccc">
              回访率
              <br />
              {{ item.visitRate * 100 + '%' }}
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-row :gutter="20">
          <el-col
            :span="12"
            v-for="(item,index) in right"
            :key="index"
            class="mb20"
            style="border-bottom: 1px dashed #ccc;"
          >
            <div>
              <el-button
                type="text"
                @click="handleColClick(item)"
                class="mr10"
              >{{ item.patientName }}</el-button>
              <span class="mr10">{{ item.patientSex }}</span>
              <span class="mr10">{{ item.patientAge }}</span>
              <span>{{ item.outModel }}</span>
            </div>
            <p>回访次数：{{ item.visitNum }}</p>
            <div class="flex">
              <p class="mr20">主治医师：{{ item.name }}</p>
              <p>出院科室：{{ item.outDeptName }}</p>
            </div>
            <p>住院时间：{{ item.inTime }}至{{ item.outTime }}（{{item.inDays}}天）</p>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { getVisitRecord, getVisitRecordDetails, getVisitRank } from '@/api/monitor'
import { getMonitorTime } from '@/utils/util'

export default {
  data() {
    return {
      left: [],
      right: [],
      row: JSON.parse(this.$route.query.row)
    }
  },
  async created() {
    let param = getMonitorTime()
    const res1 = await getVisitRank(param)
    if (res1.state === '000000') {
      this.left = res1.data
      console.log('left', this.left)
    }
    const res = await getVisitRecord({ userId: this.row.userId, ...param })
    console.log('res', res)

    if (res.state === '000000') {
      this.right = [...res.data]
    }
  },
  methods: {
    handleColClick(item) {
      console.log('item', item)
      this.$router.push({
        path: '/monitor/monitor-patientDetail',
        query: { row: JSON.stringify(item) }
      })
    },
    async handleClick(item) {
      let param = getMonitorTime()
      const res = await getVisitRecord({ userId: item.userId, ...param })
      if (res.state === '000000') {
        this.right = [...res.data]
      }
    }
  }
}
</script>
